<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            font-family: sans-serif;
            margin: 0;
        }

        button {
            height: 40px;
            width: 200px;
        }

        .warning {
            background-color: red;
            text-align: center;
            width: 100%;
            padding: 10px;
            font-size: 14pt;
            color: white;
        }
    </style>
    <!-- 引入react核心库 -->
	<script type="text/javascript" src="../../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../../js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <!-- 注意：js的类型type="text/babel" -->
    <script type="text/babel">
        function Warning(props){
            if(!props.warn){
                return null;
            }
            return (
                <div className='warning'>
                    Warning
                </div>
            )
        }
        class Page extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    showWarning: false
                }
                this.handleToggleClick=this.handleToggleClick.bind(this)
            }
            handleToggleClick() {
                this.setState((preState) => (
                    { showWarning: !preState.showWarning }
                ))
            }
            render() {
                return (
                    <div>
                        <Warning warn={this.state.showWarning} />
                        <button onClick={this.handleToggleClick}>{this.state.showWarning?'hide':'show'}</button>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Page />
            , document.getElementById('root')
        )
    </script>
</body>

</html>